import { Modal, Input, Radio, Button, Popover, Icon } from "antd";
import '@ant-design/compatible/assets/index.css';
import React from 'react';
import { Form } from '@ant-design/compatible';
import ReactUeditor from '../../../../components/AntdUeditor'
import AliyunOSSUpload from '../../../../components/AntdUpload'
import styles from '../style.less'
import FormItem from './FormItem'
import InputPop from './InputPop'


const CreateForm = props => {
  const { modalVisible, form, onSubmit: handelAdd, onCancel } = props;
  
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handelAdd(fieldsValue);
    })
  }
  return (
      <Modal
        destoryOnclose
        title="编辑图文"
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <FormItem
          label="图文标题"
          className={styles.require}
        >
          {form.getFieldDecorator('desc', {
            rules: [
              {
                require: true,
                message: '请输入至少五个字符得规则描述！',
                min: 5
              }
            ]
          })(<Input placeholder="请输入图文标题" />)}
        </FormItem>
        <FormItem
          label="图文分类"
          className={styles.require}
        >
          <Radio.Group name="radiogroup-category" defaultValue={1} className={styles.radio_group}>
            <Radio value={1}>分类一</Radio>
            <Radio value={2}>分类一</Radio>
            <Radio value={3}>分类一</Radio>
            <Radio value={4}>分类一</Radio>
          </Radio.Group>
          <InputPop />
        </FormItem>
        <FormItem
          label="上传封面"
          className={styles.require}  
        >
          {form.getFieldDecorator('photos')(<AliyunOSSUpload />)}

        </FormItem>
        <FormItem
          label="公司信息"
          className={styles.require}
        >
          <Radio.Group name="radiogroup-shopCompany" defaultValue={1} >
            <Radio value={1}>显示</Radio>
            <Radio value={2}>不显示</Radio>
          </Radio.Group>
        </FormItem>
        <ReactUeditor />
      </Modal>
  )
}

export default Form.create()(CreateForm);